<template>
  <view>
    <view class="goods-list-box">
      <block v-for="(item,index) in goodsList" :key="index">
        <my-goods :item="item" @click="gotoGoodDetail(item.goods_id)" :count_show="false"></my-goods>
      </block>
    </view>
    <button v-show="showTopButton" @click="scrollToTop" class="top-button">↑</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        queryObj: {
          query: '',
          cid: '',
          pagenum: 1,
          pagesize: 10
        },
        goodsList: [],
        total: 0,
        // 节流阀
        isLoading: false,
        scrollTop: 0, // 滚动条位置
        showTopButton: false, // 控制按钮是否显示
      };
    },
    onLoad(options) {
      console.log(options);
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cid || ''
      this.getGoodsList();
    },
    methods: {

      async getGoodsList(callback) {
        this.isLoading = true;
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj)
        //  只要数据请求完毕，就立即按需调用 cb 回调函数，关闭下拉刷新
        callback && callback()
        if (res.meta.status != 200) return uni.$showToast()
        this.goodsList = [...this.goodsList, ...res.message.goods];
        this.total = res.message.total;
        this.isLoading = false;
      },
      gotoGoodDetail(id) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + id
        })
      },
      scrollToTop() {
        // 使用uni-app提供的API平滑滚动到顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300 // 滚动动画持续时间，单位ms
        });
      }
    },
    //上拉触底加载更多
    onReachBottom() {
      // 判断是否还有下页数据
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total)
        return uni.$showMsg('数据加载完毕。。')
      // 判断是否正在请求其它数据，如果是，则不发起额外的请求
      if (this.isLoading) return
      this.queryObj.pagenum += 1;
      this.getGoodsList();
    },
    // 下拉刷新数据
    onPullDownRefresh() {
      // 1. 重置关键数据
      this.queryObj.pagenum = 1;
      this.total = 0;
      this.goodsList = [];
      this.isLoading = false;
      // 重新发起请求，并把关闭下拉刷新
      this.getGoodsList(() => uni.stopPullDownRefresh())

    },

    onPageScroll(e) {
      if (e.scrollTop > 1000) { // 当滚动距离超过300px时显示按钮
        this.showTopButton = true;
      } else {
        this.showTopButton = false;
      }
    },

    beforeDestroy() {

    }
  }
</script>

<style lang="scss">
  .top-button {
    position: fixed;
    bottom: 30px;
    /* 距离底部20像素 */
    right: 30px;
    /* 距离右侧20像素 */
    z-index: 999;
    /* 确保按钮在其他元素之上 */
    background-color: rgba(255, 255, 255, 0.5);
    /* 半透明白色背景 */
    border: 1px solid rgba(0, 0, 0, 0.2);
    /* 半透明边框 */
    border-radius: 50%;
    /* 圆形按钮 */
    width: 40px;
    /* 按钮宽度 */
    height: 40px;
    /* 按钮高度 */
    line-height: 40px;
    /* 文字垂直居中 */
    text-align: center;
    /* 文字水平居中 */
    font-size: 20px;
    /* 文字大小 */
    color: #333;
    /* 文字颜色 */
    opacity: 0.8;
    /* 整体透明度 */
    transition: opacity 0.3s;
    /* 透明度过渡效果 */
  }
</style>